import React, { Component } from 'react'
import {connect} from 'react-redux'
import {createUpdateAction,createDeleteAction} from '../../redux/action/List'

class List extends Component {
    state = {
        mouseType: false
    }
    handleDelete = (id) => {
        this.props.delete(id)
    }
    // handleMouse = (mouseType) => {
    //     console.log(mouseType)
    //     this.setState({mouseType})
    // }
    handleCheckbox = (id,event) => {
        this.props.update({id,done:event.target.checked})
    }
    render() {
        return (
            <ul className="todo-main">
                {
                    this.props.list.map(item => {
                        return (
                            <li key={item.id} 
                            // onMouseEnter={() => this.handleMouse(true)}
                            // onMouseLeave={() => this.handleMouse(false)}
                            // style={{'backgroundColor':this.state.mouseType?'#ddd':'white'}}
                            >
                                <label>
                                    <input type="checkbox" checked={item.done} 
                                    onChange={event => this.handleCheckbox(item.id,event)}/>
                                    <span>{item.name}</span>
                                </label>
                                <button className="btn btn-danger" 
                                // style={{display:"none"}}
                                onClick={() => this.handleDelete(item.id)}
                                >删除</button>
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}

export default connect(
    state => ({list:state}),
    {
        update: createUpdateAction,
        delete: createDeleteAction
    }
)(List)
